/**
 * obj.name // GET name value ''
 * obj.name = 'ouha' // SET name value 'ouha'
 * obj.name // GET name value 'ouha'
 */

function render(key, value) {
    console.log(`SET key = ${key}, value=${value} `);
}


function defineReactive(obj, key, val) {
    reactive(obj[key])
    Object.defineProperty(obj, key, {
        get: function () {
            return val;
        },
        set: function (newVal) {
            if (newVal === val) {
                return;
            }
            val = newVal
            render(key, val)
        },
    })
}


function reactive(obj) {
    if (typeof obj === 'object') {
        Object.keys(obj).map((item, index) => {
            console.log(item);
            defineReactive(obj, item, obj[item])
        })
    }
}

let obj = {
    a: 1
}

reactive(obj)

obj.a = 10
obj.a = 11